<template>
  <div class="swiper-slide">
    <h1>威武5连</h1>
    <h2>2017·剽悍行动营</h2>
    <div class="fir_circle circle">
        <div class="sec_circle circle">
            <div class="thi_circle circle">
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '剽悍行动·至尊威武！'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    @import "../assets/config.scss";
      h1,h2 {
        color: #4DD0C8;
        letter-spacing: 0.2em;
      }
      h1 {
        display: inline-block;
        font-size: 30rem/$huansuan;
    }
     h2 {
        font-size: 20rem/$huansuan;
     }
      .circle {
        margin: 0 auto;
        border: 0.1em solid #4DD0C8;
        border-radius: 50%;
      }
      .fir_circle {
        margin-top: 60rem/$huansuan;
        width: 200rem/$huansuan;
        height: 200rem/$huansuan;
      }
      .sec_circle {
        width: 150rem/$huansuan;
        height: 150rem/$huansuan;
      }
      .thi_circle {
        width: 100rem/$huansuan;
        height: 100rem/$huansuan;
      }
</style>
